<template>
  <div class="wb-item-reward" :style="itemStyle">
    <img :src="qItem.url" />
    <div class="name-profession" ref="nameProfession">
      <span>{{qItem.name}}</span>
      <span>{{qItem.profession}}</span>
    </div>

    <div class="info swiper swiper-container vertical-scroll" :class="getSwiperClassBySlideIndex">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="content-con">{{qItem.text}}</div>
        </div>
      </div>
      <div class="swiper-scrollbar" :class="getScrollbarClassBySlideIndex"></div>
    </div>
    <!-- <div class="info">{{qItem.text}}</div> -->
  </div>
</template>
<script>
import { utils } from "@/components/utils/utils"

export default {
  mixins: [utils],
  props: ["qItem"],
  computed: {
    getSwiperClassBySlideIndex(){
      return ['swiper-container-' + '-' + _.random(0, 1000)]
    },
    getScrollbarClassBySlideIndex(){
      return ['swiper-scrollbar-' + '-' + _.random(0, 1000)]
    },
  },
  methods: {},
  mounted() {
    let nameProfession = this.$refs.nameProfession;
    nameProfession.style.paddingBottom = "8px";
    nameProfession.style.borderBottomWidth = "1px";
    nameProfession.style.borderBottomStyle = "solid";
    nameProfession.style.borderBottomColor = "#fc3985";

    if(window.Swiper){
      this.swiper = new window.Swiper('.' + this.getSwiperClassBySlideIndex[0], {
        direction: 'vertical',
        slidesPerView: 'auto',
        freeMode: true,
        scrollbar: {
          el: '.' + this.getScrollbarClassBySlideIndex[0],
        },
        mousewheel: true,
      });
    }
  },
  beforeUnmount(){
    if(this.swiper && this.swiper.destroy){
      this.swiper.destroy();
    }
  }
};
</script>

<style lang="scss">
.wb-item-reward {
  width: inherit;
  height: inherit;

  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .vertical-scroll{
    .swiper-slide {
      height: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    .slide-img{
      width: 100%;
      object-fit: contain;
    }
  }
  .gallery-thumbs{
    .swiper-slide{
      display: flex;
      justify-content: center;
      justify-items: center;
    }
  }
  img {
    width: var(--size-450);
    height: var(--size-450);
    object-fit: contain;
    position: relative;
    top: var(--size-136);
    left: var(--size-78);
    right: var(--size-58);
  }

  .name-profession {
    position: relative;
    top: var(--size-170);
    left: var(--size-58);
    bottom: var(--size-100);
    font-size: var(--size-34);
    width: var(--size-500);
    color: #ffffff;
  }
  .content-con{
    padding-right: var(--size-24);
    text-align: justify;
  }
  .info {
    width: var(--size-510);
    height: var(--size-190);
    position: relative;
    top: var(--size-190);
    left: var(--size-58);
    // overflow-y: scroll;
    color: #ffffff;
    margin: 0;
  }

  .swiper-scrollbar {
    background-color: #0b0923;
  }
  .swiper-scrollbar-drag {
    background-color: #e95079;
  }
}
</style>


